大家好，我是參加第 18 屆 iThome 鐵人賽「Build on Google AI」組別的參賽者！

今年，軟體開發領域迎來了一場前所未有的範式轉移（Paradigm Shift）。前 OpenAI 首席科學家 Andrej Karpathy 提出了一個極具破壞性與啟發性的概念 —— 「Vibe Coding（氛圍編程）」。

在過去，打造一個全端應用，工程師必須從資料庫架構、RESTful API、CSS 像素微調一路手敲到雲端部署，耗費數週甚至數月；而在 Vibe Coding 的時代，工程師的角色正在轉變為「AI 導演」。我們以自然語言為指令，用高階思維驅動 AI 產出代碼、重構架構、建置介面與對接服務。

但問題來了：Vibe Coding 真的能拿來做「能賺錢、能落地、架構嚴謹的生產級 SaaS」嗎？ 還是只能停留在做做 Toy Project、寫寫單元測試的階段？

接下來的 30 天，我將透過這趟鐵人挑戰給出答案！

🎯 系列主題與核心定位

💡 本次挑戰打造的產品提案構想：【OmniVibe AI】

為了讓 30 天的實戰具備商業場景，我們不單純刻介面，而是實作一個解決真實痛點的垂直領域 SaaS —— 「OmniVibe AI：多模態知識提煉與自媒體自動化產製平台」。

1. 痛點剖析（User Pain Points）

現代內容創作者、行銷人員與研究員每天需要消化龐大的多模態資訊（1 小時的 YouTube 訪談、長篇 Podcast、數十頁的 PDF 白皮書、財報等）。要將這些巨量資訊轉化為短影音腳本、社群貼文（LinkedIn/Twitter/FB）或知識筆記，往往需要耗費數小時的重複性手工整理。

2. 核心功能亮點（SaaS Capabilities）

• 超長文本與多模態極速消化：借助 Gemini 原生支援的百萬級 Token Context Window，使用者直接上傳長影片、音訊檔或整份 PDF，系統即可秒級理解。
• 智慧結構化產出（Structured Outputs）：透過精準的 Prompt 工作流，一鍵轉化為社群貼文矩陣、SEO 長文、簡報大綱或 Markdown 格式的精華摘要。
• AI 設計原型的極速落地：使用 Google Stitch 快速生成優質、美觀的現代化儀表板與工作區 UI。
• 企業級 SaaS 骨幹：完整整合 Firebase 全家桶（Auth 身份認證、Firestore 雲端資料庫、Storage 檔案儲存）以及 Stripe 訂閱制金流與用量配額管理。

🛠️ 核心技術棧（Tech Stack）

我們將把 Google 現代開發者生態系發揮到極致：

🗺️ 30 天馬拉松完整航行藍圖

為了確保挑戰具有清晰的節奏與可追蹤性，本系列將分為五大篇章：

📍 第一篇：思維重塑與產品藍圖（Day 01 - Day 05）

• Day 01：【啟航】Vibe Coding 時代來臨：30 天打造全棧 AI SaaS 的實戰藍圖
• Day 02：【產品定義】從想法到 PRD：用自然語言與 AI 協作梳理 OmniVibe 核心需求
• Day 03：【技術架構】Google AI 生態系全景：為什麼選擇 Gemini + Firebase 全家桶？
• Day 04：【開發環境】現代 Vibe Coding 環境搭建：Cursor / VS Code + AI 擴充工具鏈極致配置
• Day 05：【雲端基底】初始化 Google Cloud & Firebase 專案架構與安全金鑰管理

📍 第二篇：Google AI 核心引擎與 Prompt 工坊（Day 06 - Day 12）

• Day 06：【AI Studio】走進 Google AI Studio：第一支 System Prompt 與參數調優實戰
• Day 07：【Gemini API】快速串接 Gemini 1.5 SDK：在 Next.js 後端建立 AI API Route
• Day 08：【長文本魔法】百萬 Token 實測：讓 Gemini 一次性吞下長篇 PDF 與長篇報告
• Day 09：【多模態震撼】影音不求人：直接上傳音訊與影片讓 Gemini 生成逐字稿與重點切片
• Day 10：【結構化資料】運用 Structured Outputs (JSON Schema) 保證 AI 回傳絕對穩定
• Day 11：【工具調用】Function Calling 實戰：賦予 Gemini 搜尋網路與調用內部 API 的能力
• Day 12：【快取省成本】善用 Context Caching 機制：在長文本應用中降低 50% 以上 API 成本

📍 第三篇：介面疾速生成與全棧基礎建設（Day 13 - Day 19）

• Day 13：【Google Stitch】AI 介面生成器：用自然語言快速產出 SaaS Dashboard 現代化前端
• Day 14：【元件化重構】將 Stitch 原型落地至 Next.js + Tailwind CSS + shadcn/ui
• Day 15：【身份認證】Firebase Auth 實作：Google 一鍵登入、用戶狀態持久化與路由保護
• Day 16：【資料建模】Cloud Firestore 架構設計：用戶檔案、多模態專案與知識庫關聯
• Day 17：【檔案管線】Firebase Storage 實作：大型影片與多媒體檔案的分塊上傳與安全規則
• Day 18：【即時狀態】Firestore Snapshot 即時監聽：讓專案處理狀態動態同步前端
• Day 19：【流式體驗】Server-Sent Events (SSE)：打造極致絲滑的 Gemini AI 打字機串流輸出

📍 第四篇：SaaS 商業化、金流與安全性（Day 20 - Day 25）

• Day 20：【商業化設計】SaaS 計費模式規劃：免費試用、點數扣款（Tokens）與訂閱級距
• Day 21：【金流對接】Stripe Checkout 串接：讓用戶一鍵刷卡升級 Pro 會員
• Day 22：【非同步處理】Stripe Webhook 實作：安全驗證付款狀態並自動配發用戶額度
• Day 23：【防禦工事】Firebase App Check 與 Rate Limiting：防止惡意爬蟲與 API 濫用
• Day 24：【錯誤降級】AI 請求重試機制與 Error Boundary：打造不崩潰的穩健系統
• Day 25：【使用者體驗】專案歷史紀錄、搜尋與一鍵匯出（Markdown / Notion / PDF）功能

📍 第五篇：部署、效能觀測與產品覆盤（Day 26 - Day 30）

• Day 26：【現代託管】邁向正式環境：認識次世代託管利器 Firebase App Hosting
• Day 27：【自動化 CI/CD】GitHub Actions 與 App Hosting 聯動：推程式碼自動發布生產版
• Day 28：【效能監控】Google Cloud Logging & Firebase Performance：掌握即時延遲與錯誤率
• Day 29：【Vibe Coding 覆盤】人機協作方法論：自然語言開發中的 Prompt 反覆運算經驗談
• Day 30：【鐵人完賽】OmniVibe AI 正式上線！30 天產品煉金術回顧與未來 Roadmap

🚀 結語與明天預告

萬丈高樓平地起，Vibe Coding 不是空談魔法，而是將開發者的工程直覺與 AI 的代碼生產力做最完美的耦合。

今天我們確立了北極星目標與產品提案，並排定了紮實的 30 天實戰路線。在接下來的挑戰中，我會盡可能把踩坑經歷、架構考量、Prompt 原文以及代碼實作細節無保留地分享出來。

👉 明天（Day 02），我們將進入【產品定義篇】：從想法到 PRD！看我們如何用自然語言與 AI 深度對話，梳理出 OmniVibe 的核心規格書與用戶旅程！

如果對這個主題感興趣，歡迎訂閱、按讚並追蹤本系列，我們明天見！🔥